<template>
	<view v-if="canshow" class="content-store" @click="toStoreDetail">
		<image class="store-head" :src="$urlPrefix+store.imageSrc" mode="aspectFill"></image>
		<view class="store-info">
			<text class="info-name">
				{{store.name}}
			</text>
			<text class="info-reputation">
				评分：{{store.score}}
			</text>
			<text class="info-insell_num">
				在售商品：{{onSaleNum}}
			</text>
		</view>

		<view class="store-service" @click.stop="service">
			<uni-icons type="person" size="25" color="#888888"></uni-icons>
			<text style="font-size: 24rpx;color: #888888;">联系客服</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			storeId: {
				type: Number
			}
		},
		data() {
			return {
				store:{},
				onSaleNum:0,
				canshow:false
			};
		},
		created() {
			//console.log(this.storeId);
			var vue = this
			vue.canshow = false
			vue.$request("store/getOne",{id:vue.storeId},function(res){
				//console.log(res.data.data);
				vue.store = res.data.data[0]
				vue.$request("goods/getAll",null,function(res){
					if(res.data.data !== null){
						var goodsList = res.data.data
						for(var i = 0;i < goodsList.length;i++){
							//console.log(goodsList[i]);
							if(parseInt(goodsList[i].storeId) === vue.storeId){
								vue.onSaleNum++
							}
						}
						//console.log(vue.store);
						//console.log(vue.onSaleNum);
						vue.canshow = true
					}
				})
				
			})
		},
		methods: {
			toStoreDetail() {
				//console.log("点击店铺详情");
				uni.navigateTo({
					url:"/pages/store-detail/store-detail?id="+this.storeId
				})
			},
			service() {
				console.log("点击联系客服");
			}
		}
	}
</script>

<style lang="scss">
	.content-store {
		//box-shadow: 0 0 20rpx #C0C0C0;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;

		.store-head {
			height: 160rpx;
			width: 160rpx;
		}

		.store-info {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;

			.info-name {
				font-size: 40rpx;
				font-weight: bold;
				position: absolute;
				top: 20rpx;
				width: 500rpx;
				//border: 1px solid red;
				overflow: hidden;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				display: -webkit-box;
			}

			.info-reputation {
				margin-top: 20rpx;
				font-size: 28rpx;

			}

			.info-insell_num {
				font-size: 28rpx;
			}
		}

		.store-service {
			display: flex;
			flex-direction: row;
			align-items: center;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			
		}
	}
</style>
